import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from 'react-router-dom'

import Login from './Login'
import Layout from './Layout'
import Test from './Test'
import AuthRoute from '../../auth/Index'
import NotFound from './NotFound'

export default class Index extends Component {
  render () {
    return (
      <Router>
        <div>
          <Switch>
            {/* <Route path='/login' component={Login} /> */}
            <Route path='/login'>
              <Login />
            </Route>
            {/* 如果按照下面的写法，是无法实现权限控制的，因为你通过component配置了某个组件
            只要路由规则匹配到，它就会义务反顾的渲染出来 */}
            {/* <Route path='/layout' component={Layout} /> */}
            {/* <Route
              path='/layout'
              render={props => {
                const token = localStorage.getItem('token')

                if (token) {
                  return <Layout />
                } else {
                  return (
                    // <Redirect
                    //   to={{
                    //     // pathname 只允许写路径
                    //     pathname: '/login',
                    //     state: {
                    //       redirect: props.location.pathname
                    //     }
                    //   }}
                    // />

                    // 上述问题的解决办法1
                    <Redirect
                      to={`/login?redirect=${props.location.pathname}`}
                    />
                  )
                }
              }}
            /> */}
            {/* <Route
              path='/test'
              render={props => {
                const token = localStorage.getItem('token')

                if (token) {
                  return <Test />
                } else {
                  return (
                    // 上述问题的解决办法1
                    <Redirect
                      to={`/login?redirect=${props.location.pathname}`}
                    />
                  )
                }
              }}
            /> */}

            {/* 最终完成之后，要达到的效果如下 */}
            <AuthRoute path='/layout' component={Layout} />
            <AuthRoute path='/test' aaa='111' bbb='222'>
              <Test />
            </AuthRoute>
            <Redirect exact from='/' to='/login' />
            <Route path='*' component={NotFound} />
          </Switch>
        </div>
      </Router>
    )
  }
}
